<script setup lang="ts">
import { computed } from "vue";

type Prop = {
  padding?: number | string;
  direction?: "row" | "column";
  gap?: number | string;
  align?: "start" | "end" | "center" | "baseline" | "stretch";
  class?: string;
};

const props = withDefaults(defineProps<Prop>(), {
  padding: 5,
  direction: "row",
  gap: 5,
  align: "start"
});

const style = computed(() => {
  return {
    padding: props.padding,
    flexDirection: props.direction,
    gap: props.gap,
    alignItems: props.align
  };
});
</script>

<template>
  <div :class="['k-space-wrapper', props.class]" :style="style">
    <slot />
  </div>
</template>
<style lang="scss" scoped>
.k-space-wrapper {
  display: flex;
  box-sizing: border-box;
}
</style>
